import 'package:flutter/material.dart';
import 'package:xrenovation/localization/app_localizations.dart';
import 'package:xrenovation/routes.dart';
import 'package:xrenovation/widgets/custom_button.dart';
import 'package:xrenovation/widgets/header_box.dart';
import 'package:xrenovation/widgets/shadow_card.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final localizations = AppLocalizations.of(context);
    final theme = Theme.of(context);
    final isDarkMode = theme.brightness == Brightness.dark;

    return HeaderBox(
      child: SingleChildScrollView(
        child: Center(
          child: Container(
            constraints: const BoxConstraints(maxWidth: 1024),
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _buildTitleSection(localizations, theme),
                _buildMenuGrid(context, localizations),
                _buildInfoSection(localizations, isDarkMode, theme),
                const SizedBox(height: 50),
                _buildTestButton(context),
                const SizedBox(height: 50),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildInfoItem(String text, ThemeData theme) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 6,
          height: 6,
          margin: const EdgeInsets.only(top: 10),
          decoration: BoxDecoration(color: theme.hintColor, shape: BoxShape.circle),
        ),
        const SizedBox(width: 10),
        Expanded(
          child: Text(
            text,
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.normal, height: 1.7, color: theme.hintColor),
          ),
        ),
      ],
    );
  }

  Widget _buildInfoSection(AppLocalizations? localizations, bool isDarkMode, ThemeData theme) {
    return Container(
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: theme.cardColor,
        border: Border.all(color: Color(0xFFE4E4E7)),
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(color: Colors.black.withOpacity(0.1), blurRadius: 12, offset: const Offset(0, 4), spreadRadius: 0),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            localizations!.translate('how_it_works'),
            style: const TextStyle(fontSize: 24, fontWeight: FontWeight.w700, height: 1.33),
          ),
          const SizedBox(height: 24),
          ...['info_item1', 'info_item2', 'info_item3'].map(
            (key) => Padding(
              padding: const EdgeInsets.only(bottom: 12),
              child: _buildInfoItem(localizations.translate(key), theme),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildMenuGrid(BuildContext context, AppLocalizations? localizations) {
    final menuItems = [
      _MenuItem(icon: Icons.folder, title: localizations!.translate('projects'), route: AppRoutes.projects),
      _MenuItem(icon: Icons.chat, title: localizations.translate('chat_with_ai')),
      _MenuItem(icon: Icons.people, title: localizations.translate('contractors'), route: AppRoutes.contractors),
    ];

    return LayoutBuilder(
      builder: (context, constraints) {
        final isSmallLayout = constraints.maxWidth < 526;
        final isMediumLayout = constraints.maxWidth < 860;

        return GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          padding: const EdgeInsets.symmetric(vertical: 30),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: isSmallLayout ? 1 : (isMediumLayout ? 2 : 3),
            crossAxisSpacing: isSmallLayout ? 10 : 20,
            mainAxisSpacing: isSmallLayout ? 10 : 20,
            mainAxisExtent: isSmallLayout ? 80 : 132,
          ),
          itemCount: menuItems.length,
          itemBuilder: (context, index) {
            final item = menuItems[index];
            return ShadowCard(
              onTap: item.route != null ? () => Navigator.pushNamed(context, item.route!) : null,
              child: isSmallLayout ? _buildSmallLayoutItem(item) : _buildNormalLayoutItem(item),
            );
          },
        );
      },
    );
  }

  Widget _buildNormalLayoutItem(_MenuItem item) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(item.icon, size: 48, weight: 700),
          const SizedBox(height: 10),
          Text(item.title, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500, height: 1.56)),
        ],
      ),
    );
  }

  Widget _buildSmallLayoutItem(_MenuItem item) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Icon(item.icon, size: 36, weight: 700),
        const SizedBox(width: 16),
        Text(item.title, style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w500)),
      ],
    );
  }

  Widget _buildTestButton(BuildContext context) {
    return CustomButton(title: '跳转到支付订阅测试', onTap: () => Navigator.pushNamed(context, AppRoutes.subscription));
  }

  Widget _buildTitleSection(AppLocalizations? localizations, ThemeData theme) {
    return Padding(
      padding: const EdgeInsets.only(top: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            localizations!.translate('welcome_to_app'),
            style: const TextStyle(fontSize: 30, fontWeight: FontWeight.w700, height: 1.4),
          ),
          const SizedBox(height: 8),
          Text(
            localizations.translate('app_description'),
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, height: 1.3, color: theme.hintColor),
          ),
        ],
      ),
    );
  }
}

class _MenuItem {
  final IconData icon;
  final String title;
  final String? route;

  const _MenuItem({required this.icon, required this.title, this.route});
}
